<template>
    <div class="cateen-detail">
        <nav-header>
			<template slot="menuBefore">
				<li><router-link to="/life/canteen/menu-list" tag="a">菜单管理</router-link></li>
				<li class="gap">&gt;</li>
			</template>
				<li>菜单详情</li>
		</nav-header>

        <div class="cateen-content" v-loading="loading.status" :element-loading-text="loading.txt">
            <div class="list-item">
                <span>日期：</span>
                <span>{{infoDetail.day_time}}</span>
            </div>

            <div v-for="(item, inx) in infoDetail.menus" :key="inx">
                <div class="list-item">
                    <span>餐次名称{{inx + 1}}:</span>
                    <span>{{item.name}}</span>
                </div>
                <div class="list-item list-box">
                    <span>添加菜式：</span>
                    <div>
                        <div class="list-content" v-for="(item1, inx1) in item.menu" :key="inx1">
                            <img :src="BASE_URL + item1.path" alt="菜式图片">
                            <span>{{item1.name}}</span>
                            <span>{{item1.price}}元</span>
                        </div>
                    </div>
                </div>
            </div>

            <el-button type="primary" @click="goBack">返回</el-button>         
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                infoDetail: {},
                loading: {
                    status: false,
                    txt: '保存数据...'
                },
            }
        },
        created() {
            this.getDetail();
        },
        methods: {
            /**
             * 获取菜单详情 
             */
            getDetail() {
                this.loading.status = true;

                let success = (res => {
                    this.loading.status = false;
                    this.infoDetail = res.data;                   
                })
                const params = {
                    day_time: this.$route.params.id
                }

                this.$ajax.get('api/carte/single', {params, func:{success: success}})
            },
            /**
             * 返回上一级
             */
            goBack() {
                this.$router.go(-1);
            }
        },
    }
</script>

<style lang="scss">
    .cateen-detail {
        padding-top: 20px;

        .cateen-content {
            .list-item {
                >span:first-child {
                    display: inline-block;
                    margin-bottom: 30px;
                    width: 150px;
                }

                >div {
                    margin-bottom: 50px;
                }
            }

            .list-box {
                display: flex;

                >div {
                    display: flex;
                    flex: 1;
                    flex-wrap: wrap;

                    .list-content {
                        margin-right: 20px;
                        margin-bottom: 22px;
                        width: 260px;
                        height: 240px;
                        border: 1px solid #DDDDDD;
                        box-sizing: border-box;

                        img {
                            width: 100%;
                            height: 160px;
                            object-fit: contain;
                        }

                        span:nth-child(2) {
                            display: block;
                            padding: 16px 0 12px 12px;
                            font-size: 14px;
                            color: #000000;
                        }

                        span:last-child {
                            padding-left: 12px;
                            font-size: 12px;
                            color: #333333;
                        }
                    }
                }
            }

            >button {
                width: 80px;
            }
        }
    }
</style>